<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="web design, website development, web application development, print design, database development, ecommerce websites, search engine optimization, packaging design" />
<meta name="description" content="Tutorial demo showing how to create a simple menu slider using jQuery" />
<meta name="robots" content="all" />
<title>jQuery Tutorial Demo - Creating A jQuery Menu Slider</title>
<script type="text/javascript" src="http://wpdev.wordpress.com/wp-content/plugins/jquery-slide-menu/js/jquery.min.js"></script> 
<link rel="stylesheet" href="http://wpdev.wordpress.com/wp-content/plugins/jquery-slide-menu/css/style.css" type="text/css" media="screen" />

<script type="text/JavaScript">
$(document).ready(function() {
  // Declare variables
  var width = 400;
  var slides = $('#list-images li');
  var numSlides = slides.length;
  
  // Wrap the slides & set the wrap width - this will be used to animate the slider left/right
  slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
  $('#slide-wrap').css({width: width * numSlides});
  
  // Hover function - animate the slides based on index of links
  $('#list-links li a').hover(function(){
	$('#list-links li').removeClass('hover');
	var i = $(this).index('#list-links li a');
	$(this).parent().addClass('hover');
	$('#slide-wrap').stop().animate({'marginLeft' : width*(-i)});
  });
});
</script>

</head>
<body>
<div class="wrap">
  <h2 class="text-center">jQuery Demo: Create A jQuery Menu Slider</h2>
	<div id="menu-slider">
    <ul id="list-links">
        <li class="hover"><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/">Mega Menu</a></li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">Vertical Mega Menu</a></li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/">Vertical Accordion Menu</a></li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drill-down-ipod-menu-widget/">jQuery Drill Down iPod Menu</a></li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-slick-menu-widget/">jQuery Slick Menu</a></li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-floating-menu/">Floating Menu</a></li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-floating-tweets/">Floating Tweets</a></li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugin-slick-contact-forms/">Slick Contact Forms</a></li>
        <li class="last"><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/">Slick Social Share Buttons</a></li>
    </ul>

    <ul id="list-images">
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/">
            <img src="http://www.designchemical.com/media/images/mega_1a.jpg" alt="" />
            <span>jQuery Horizontal Mega Menu</span></a>
        </li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">
            <img src="http://www.designchemical.com/media/images/mega_2a.jpg" alt="" />
            <span>jQuery Vertical Mega Menu</span></a>
        </li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/">
            <img src="http://www.designchemical.com/media/images/mega_3a.jpg" alt="" />
            <span>jQuery Vertical Accordion Menu</span></a>
        </li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drill-down-ipod-menu-widget/">
            <img src="http://www.designchemical.com/media/images/mega_4a.jpg" alt="" />
            <span>jQuery Drill Down iPod Menu</span></a>
        </li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-slick-menu-widget/">
            <img src="http://www.designchemical.com/media/images/mega_5a.jpg" alt="" />
            <span>jQuery Slick Menu</span></a>
        </li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-floating-menu/">
            <img src="http://www.designchemical.com/media/images/mega_6a.png" alt="" />
            <span>Floating Menu Widget</span></a>
        </li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-floating-tweets/">
            <img src="http://www.designchemical.com/media/images/mega_7a.png" alt="" />
            <span>Floating Tweets Widget</span></a>
        </li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugin-slick-contact-forms/">
            <img src="http://www.designchemical.com/media/images/mega_8a.jpg" alt="" />
            <span>Slick Contact Forms</span></a>
        </li>
        <li><a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/">
            <img src="http://www.designchemical.com/media/images/mega_9a.jpg" alt="" />
            <span>Slick Social Share Buttons</span></a>
        </li>
    </ul>
    <div class="clear"></div>
</div>
		
		<p class="clear text-center"><a href="http://www.designchemical.com/blog/index.php/jquery/jquery-tutorial-create-a-jquery-menu-slider/">View jQuery Menu Slider Tutorial</a></p>
	  </div>
</body>
</html>
